@import './variables';
.base-info {
    height:60px;
    .cover {
        height:60px;
        width:60px;
        float:left;
        border:1px solid #ddd;
        padding:2px;
        margin-right:10px;
        img {
            width:100%;
            height:100%;
        }
    }
    h2 {
        font-size:18px;
        font-weight: bold;
        display: inline-block;
        margin-right:10px;
        height: 32px;
        line-height: 32px;
    }
    .ctrls {
        display: inline-block;
        button {
            margin-left: 20px;
        }
    }
}

.list-blank {
    margin-top:10px;
    padding:100px;
}
.list {
    margin-top:10px;
}

.edit-photo-album {
    .blank {
        height:30px;
    }

    .red {
        color:#f00;
    }
    .blank {
        height:30px;
    }
    .cover {
        width:262px;
        height:159px;
        overflow: hidden;
        position: relative;
        .text {
            position: absolute;
            text-align: center;
            width:100%;
            height:100%;
            line-height: 159px;
            top:0;
            left:0;
            font-size:18px;
            color:#000;
            font-weight: bold;
            text-shadow: 4px -4px #fff;
        }
    }
}

.list {
    ul {
        list-style: none;
        padding:0;
        li {
            float:left;
            background:#fff;
            padding:16px;
            border-radius: 6px;
            margin-right:20px;
            margin-bottom: 20px;
            position: relative;
            img {
                height:200px;
                cursor: pointer;
            }
            .select-btn {
                position: absolute;
                top:10px;
                left:10px;
                width:20px;
                height:20px;
                border-radius: 10px;
                background:#f0f0f0;
                border:1px solid #ccc;
                cursor: pointer;
                .anticon {
                    font-size:20px;
                    display: none;
                    color:$primary-color;
                }
            }
            .select-btn.checked {
                border:none;
                .anticon {
                    font-size:20px;
                    display: block;
                }
            }
            .setting-btn {
                position: absolute;
                top:10px;
                right:10px;
                background:#666;
                width:20px;
                height:20px;
                display: none;
                .anticon {
                    font-size:20px;
                    display: block;
                    color:#fff;
                }
            }
        }
        li:hover {
            .setting-btn {
                display: block;
            }
        }
    }
}

.big-preview-wrap {
    position: absolute;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    background:rgba($color: #000000, $alpha: 0.5);
    padding:20px 0;
    .big-preview {
        width:1200px;
        height:100%;
        margin:0 auto;
        background:url(~@/assets/loginbg.png) bottom center;
        div.pic {
            width:900px;
            float:left;
            height:100%;
            padding-top:30px;
            padding-bottom:120px;
            text-align: center;
            position: relative;
            background: rgba($color: #000000, $alpha: 0.5);
            .big-img {
                width:100%;
                height:100%;
                position: relative;
                img {
                    max-width: 860px;
                    max-height:100%;
                    position: absolute;
                    top:50%;
                    left:50%;
                    transform: translate(-50%,-50%);
                }
            }
            .thumbs {
                position: absolute;
                bottom:20px;
                width:780px;
                left:60px;
                .thumb-inner {
                    width:100%;
                    height: 100%;
                    text-align: center;
                    overflow: hidden;
                }
                .anticon-left-circle {
                    position: absolute;
                    position: absolute;
                    left: -25px;
                    color: #fff;
                    top: 15px;
                    font-size: 20px;
                    cursor: pointer;
                }
                .anticon-right-circle {
                    position: absolute;
                    position: absolute;
                    right: -25px;
                    color: #fff;
                    top: 15px;
                    font-size: 20px;
                    cursor: pointer;
                }
                .thumb-list {
                    white-space: nowrap;
                    padding: 0;
                    width:auto;
                }
                .thumb-item {
                    display: inline-block;
                    margin:0 5px;
                    border:2px solid #eee;
                    cursor: pointer;
                    img {
                        height:50px;
                    }
                }
                .active {
                    border-color:$primary-color;
                }
            }
        }
        div.info {
            width:300px;
            height: 100%;
            float:right;
            background:rgba($color: #ddd, $alpha: 0.3);
            padding:20px;
            h2 {
                font-size:18px;
                font-weight: bold;
            }
        }
    }
}